<!--
 * @Description: 用户管理-新增|编辑 弹窗
 * @Version: 1.0
 * @Author: yxx
 * @Date: 2023-09-25 15:31:11
 * @LastEditors: yxx
 * @LastEditTime: 2024-12-09 16:36:42
-->
<template>
  <div class="add-user-dialog">
    <el-dialog v-model="isDialog" :title="title" width="700px" :close-on-click-modal="false">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="account" label="用户账号：">
              <el-input placeholder="用户账号" v-model="ruleForm.account"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="status" label="账号状态：">
              <el-select v-model="ruleForm.status" placeholder="账号状态">
                <el-option label="停用" value="1"></el-option>
                <el-option label="正常" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="name" label="用户名称：">
              <el-input placeholder="用户名称" v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="roleId" label="用户角色：">
              <el-select v-model="ruleForm.roleId" placeholder="用户角色">
                <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="phone" label="手机号码：">
              <el-input placeholder="手机号码" v-model="ruleForm.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="email" label="电子邮箱：">
              <el-input placeholder="电子邮箱" v-model="ruleForm.email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="remark" label="备注：">
              <el-input type="textarea" :rows="4" placeholder="备注" v-model="ruleForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleConfirm(ruleFormRef)">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ElMessage } from "element-plus"
import type { ElForm, FormInstance } from "element-plus"
import { getRolePageListApi, addUserApi } from "@/api/modules/system"
import { SysRes } from "@/api/interface/system/response"
import { SysReq } from "@/api/interface/system/request"

const emit = defineEmits(["refreshData"])

const title = ref<string>("新增")
const isDialog = ref<boolean>(false)
const ruleForm = ref<SysReq.UserAdd>({
  account: "",
  name: "",
  deptId: 1,
  roleId: 1,
  phone: "",
  email: "",
  status: "0",
  remark: "",
  type: "0"
})
const ruleFormRef = ref<FormInstance>()
const rules = {
  account: [{ required: true, message: "必填项", trigger: "change" }],
  name: [{ required: true, message: "必填项", trigger: "change" }],
  roleId: [{ required: true, message: "必填项", trigger: "change" }],
  phone: [{ required: true, message: "必填项", trigger: "change" }],
  email: [{ required: true, message: "必填项", trigger: "change" }],
  status: [{ required: true, message: "必填项", trigger: "change" }]
}
interface Options {
  label: string
  value: number
}
const roleOptions = ref<Options[]>([])

/** 获取 角色选项 */
const getRoleList = () => {
  getRolePageListApi({ pageIndex: 1, pageSize: 99999 }).then(res => {
    res.data.result.forEach(e => {
      roleOptions.value.push({
        value: e.id,
        label: e.name
      })
    })
  })
}
getRoleList()
/** 重置 表单 */
const resetForm = () => {
  ruleFormRef.value?.resetFields()
  ruleForm.value = {
    account: "",
    name: "",
    deptId: 1,
    roleId: 1,
    phone: "",
    email: "",
    status: "0",
    remark: "",
    type: "0"
  }
}
/** 弹窗 打开 */
const handleOpen = (str: string, row?: SysRes.UserPageList) => {
  isDialog.value = true
  title.value = str + "用户"
  if (row) {
    ruleForm.value = row
  }
}
/** 弹窗 确定 */
const handleConfirm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (!valid) return
    addUserApi(ruleForm.value).then(() => {
      ElMessage.success(`${title.value}成功`)
      emit("refreshData")
      resetForm()
      isDialog.value = false
    })
  })
}
/** 弹窗 取消 */
const handleCancel = () => {
  resetForm()
  isDialog.value = false
}

defineExpose({ handleOpen })
</script>

<style scoped lang="scss"></style>
